<template>
  <el-drawer
    title="表单结构树"
    direction="ltr"
    :visible.sync="showNodeTreeDrawerFlag"
    :modal="false"
    :size="280"
    :destroy-on-close="true"
    class="node-tree-drawer"
  >
    <el-tree
      ref="nodeTree"
      :data="nodeTreeData"
      node-key="id"
      default-expand-all
      highlight-current
      class="node-tree"
      icon-class="el-icon-arrow-right"
      @node-click="onNodeTreeClick"
    />
  </el-drawer>
</template>

<script>
/* eslint-disable vue/require-default-prop */
/* eslint-disable eol-last */
export default {
  props: {
    designer: Object,
  },
  data() {
    return {
      showNodeTreeDrawerFlag: false,
      nodeTreeData: [],
    };
  },
  // computed: {
  //   fieldTree: {
  //     cache: true,
  //     get() {
  //       // const fieldTree = this.designer.fieldTree;

  //     },
  //   },
  // },
  methods: {
    show() {
      this.getTree();
      this.showNodeTreeDrawerFlag = true;
    },
    getTree() {
      const run = (arr) => {
        return arr.map((i) => {
          const id = typeof i === "string" ? i : i.id;
          const obj = {
            id,
            label: this.designer.fieldLib[id].options.label,
            isLeaf: typeof i === "string" ? true : i.children.length === 0,
          };
          if (typeof i !== "string" && i.children.length > 0) {
            obj.children = run(i.children);
          }
          return obj;
        });
      };
      this.nodeTreeData = run(this.designer.fieldTree);
      this.$nextTick(() =>
        this.$refs.nodeTree.setCurrentKey(this.designer.selectedId)
      );
    },
    onNodeTreeClick(nodeData) {
      // console.log("test", JSON.stringify(nodeData));
      if (this.designer.selectedId !== nodeData.id) {
        this.designer.setSelected(nodeData.id);
      }
      // if ((nodeData.selectable !== undefined) && !nodeData.selectable) {
      //   this.$message.info(this.i18nt('designer.hint.currentNodeCannotBeSelected'))
      // } else {
      //   const selectedId = nodeData.id
      //   const foundW = this.findWidgetById(selectedId)
      //   if (!!foundW) {
      //     this.designer.setSelected(foundW)
      //   }
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.node-tree-drawer ::v-deep {
  .el-drawer {
    padding: 10px;
    overflow: auto;
  }

  .el-drawer__header {
    margin-bottom: 12px;
    padding: 5px 5px 0;
  }

  .el-drawer__body {
    padding-left: 5px;
  }
}

/*.node-tree-scroll-bar {*/
/*  height: 100%;*/
/*  overflow: auto;*/
/*}*/

.node-tree ::v-deep {
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .el-tree-node {
    position: relative;
    padding-left: 12px;
  }

  .el-tree-node__content {
    padding-left: 0 !important;
  }

  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }
  .el-tree-node__children {
    padding-left: 12px;
    overflow: visible !important; /* 加入此行让el-tree宽度自动撑开，超出宽度el-draw自动出现水平滚动条！ */
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -10px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 16px;
  }

  .el-tree-node.is-current > .el-tree-node__content {
    background: #c2d6ea !important;
  }

  .el-tree-node__expand-icon {
    margin-left: -3px;
    padding: 6px 6px 6px 0px;
    font-size: 16px;
  }
}
</style>
